<template>
  <!--备用-->
  <a-layout id="components-layout-demo-top-side-2" style="height: 100%;">
    <a-layout-header class="sflheader">
      <img src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/logo.png" alt="" style="float: left;height: inherit;" >
      <p style="display: inline-block;margin: 0 50px;font-size: 22px;">舍弗勒-人脸门禁管理系统</p>

      <div style="float:right;">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <a-avatar style="backgroundColor:#1DA57A" icon="user" />
            <span style="color: #333333;margin-left: 6px;font-size: 14px;">{{user.userNO}}</span>
          </a>
          <a-menu slot="overlay" style="top: 10px;">
            <a-menu-item>
              <a href="javascript:;" @click="quitLogin">退出登录</a>
            </a-menu-item>

          </a-menu>
        </a-dropdown>
      </div>

    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :style="{ height: '100%', borderRight: 0,overflowY: 'auto',
    overflowX: 'hidden',backgroundColor: '#e6e6e6' }"
          :open-keys.sync="openKeys"
          @openChange="onOpenChange"
          @click="menuClick"
          :defaultSelectedKeys="[$route.name]"
          :selectedKeys="[$route.name]"

        >
          <!--:default-open-keys="openKeys"    添加这一句，只打开一个大类菜单，切换关闭其他菜单-->
          <a-menu-item key="homeSummary">
            <router-link to="homeSummary" replace><a-icon type="home" />首页</router-link>]
          </a-menu-item>

          <!-- 菜单遍历的开始 -->
          <template v-for="item in menuList">
            <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
            <a-menu-item v-if="!item.children" :key="item.path">
              <router-link to="item.path" replace>{{ item.title }}</router-link>
            </a-menu-item>
            <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
            <sub-menu v-else :key="item.path" :menu-info="item" />
          </template>
<!--          <a-sub-menu key="sub1">-->
<!--            <span slot="title"><a-icon type="cluster" />授权管理</span>-->
<!--            <a-menu-item key="accessByUser">-->
<!--              <router-link to="accessByUser" replace>按人授权</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="accessByDoor">-->
<!--              <router-link to="accessByDoor" replace>按门授权</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->

<!--          <a-sub-menu key="sub2">-->
<!--            <span slot="title"><a-icon type="table" />报表查询</span>-->
<!--            <a-menu-item key="queryByDoor">-->
<!--              <router-link to="queryByDoor" replace>按门查询进出记录</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="queryByPeople">-->
<!--              <router-link to="queryByPeople" replace>按人查询进出记录</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="queryByDevice">-->
<!--              <router-link to="queryByDevice" replace>按设备查询进出记录</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="queryByEquiStatus">-->
<!--              <router-link to="queryByEquiStatus" replace>设备状态记录查询</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="queryByOutsider">-->
<!--              <router-link to="queryByOutsider" replace>外来人员进出记录</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->
<!--          <a-sub-menu key="sub3">-->
<!--            <span slot="title"><a-icon type="picture" />人脸管理</span>-->
<!--            <a-menu-item key="lightFaceManage">-->
<!--              <router-link to="lightFaceManage" replace>可见光人脸管理</router-link>-->
<!--            </a-menu-item>-->
<!--            &lt;!&ndash;<a-menu-item key="logInquire">&ndash;&gt;-->
<!--              &lt;!&ndash;<router-link to="logInquire" replace>日志查询</router-link>&ndash;&gt;-->
<!--            &lt;!&ndash;</a-menu-item>&ndash;&gt;-->
<!--          </a-sub-menu>-->
<!--          <a-sub-menu key="sub4">-->
<!--            <span slot="title"><a-icon type="stock" />基础数据</span>-->
<!--            <a-menu-item key="timeRule">-->
<!--              <router-link to="timeRule" replace>时段规则</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="doorDefinition">-->
<!--              <router-link to="doorDefinition" replace>门定义</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="channelDefinition">-->
<!--              <router-link to="channelDefinition" replace>通道定义</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->
<!--          <a-sub-menu key="sub5">-->
<!--            <span slot="title"><a-icon type="book" />人事档案</span>-->
<!--            <a-menu-item key="deptDefinition">-->
<!--              <router-link to="deptDefinition" replace>部门定义</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="peopleFile">-->
<!--              <router-link to="peopleFile" replace>人员档案</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="resignManage">-->
<!--              <router-link to="resignManage" replace>离职管理</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->
<!--          <a-sub-menu key="sub6">-->
<!--            <span slot="title"><a-icon type="control" />设备管理</span>-->
<!--            <a-menu-item key="placesDefinition">-->
<!--              <router-link to="placesDefinition" replace>场所定义</router-link>-->
<!--            </a-menu-item>-->
<!--            <a-menu-item key="devicesDefinition">-->
<!--              <router-link to="devicesDefinition" replace>设备定义</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->
<!--          <a-sub-menu key="sub7">-->
<!--            <span slot="title"><a-icon type="cluster" />权限管理</span>-->
<!--            <a-menu-item key="adminsDefinition">-->
<!--              <router-link to="adminsDefinition" replace>管理员定义</router-link>-->
<!--            </a-menu-item>-->
<!--          </a-sub-menu>-->


        </a-menu>
      </a-layout-sider>

      <!--右侧-->
      <a-layout style="padding: 10px">
        <!--面包屑导航-->
        <!-- <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb> -->
        <a-layout-content :style="{ background: '#fff', padding: '0px', margin: 0, minHeight: '280px' }">

          <router-view/>

        </a-layout-content>
      </a-layout>
    </a-layout>

  </a-layout>
</template>

<script>
  import { tableBoxHeight } from "@/api/communal";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import { Menu } from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';
  // 定义函数式组件
  const SubMenu = {
    template: `
      <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
        <span slot="title">
            <a-icon :type="menuInfo.icon" />{{ menuInfo.title }}
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.path">
            <router-link :to="item.path" replace>{{ item.title }}</router-link>
          </a-menu-item>
          <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
    name: 'SubMenu',
    // must add isSubMenu: true 此项必须被定义
    isSubMenu: true,
    props: {
      // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件
      ...Menu.SubMenu.props,
      // 接收父级传递过来的菜单信息
      menuInfo: {
        type: Object,
        default: () => ({}),
      },
    },
  };

  export default {
    components: {
      SubMenu
    },
    name:'',
    data() {
      return {
        // 菜单缩进
        inlineIndent:12,
        // 默认不折叠
        collapsed: false,
        // 选中的子菜单项
        defaultSelectedKeys: [this.$route.name],
        menuList: [],
        localezh_CN,
        rootSubmenuKeys: ['1', '2', '3', '4', '5', '6', '7'],
        openKeys: ['homeSummary'],
        user:{
          userNO:"--"
        }

      }
    },
    beforeMount(){
      let _this = this;
      // console.log(this.$store.state.user);
      if (this.$store.state.user.userNO) {
        this.user = this.$store.state.user;
        this.menuList = this.$store.state.menuList
      } else {
        this.$warning({
          title: '登录信息已失效，请重新登录！',
          okText:"去登录",
          maskClosable: false,
          keyboard: false,
          onOk() {
            return new Promise((resolve, reject) => {
              _this.$router.replace("/");
              this.$nextTick(()=>{
                this.$destroyAll();
              })
            }).catch(() => {});
          },
          onCancel() {},
        });
      }

      // 刷新页面时左侧菜单不能展开之前选中的menu
      let lastname = localStorage.getItem("openKeys");
      // console.log(lastname);
      // console.log(lastname.split(","));
      if (lastname != null && lastname != undefined ){
        this.openKeys = lastname.split(",");
      }

    },
    mounted() {
      // console.log(this.$route);
    },
    destroyed(){
      // 在页面销毁后
    },
    created () {
      // 将从缓存中取出openKeys
      const openKeys = window.localStorage.getItem('openKeys')
      if(openKeys){
        // 存在即赋值
        this.openKeys = JSON.parse(openKeys)
      }
    },
    methods: {
      onOpenChange (openKeys) {
        // 将当前打开的父级菜单存入缓存中
        window.localStorage.setItem('openKeys', JSON.stringify(openKeys))
        //  控制只打开一个
        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = openKeys;
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
      },

      // 点击菜单，路由跳转,注意的是当点击MenuItem才会触发此函数
      menuClick({ item, key, keyPath }) {
        // 获取到当前的key,并且跳转
        this.$router.push({
          path: key
        })
      },
      quitLogin(){
        // 退出清空登陆人信息
        localStorage.setItem("user", JSON.stringify({}));
        localStorage.setItem("openKeys", null);
        this.$store.state.user = {};

        this.$router.replace("/");
      },

    },

  }
</script>

<style scoped>
  .sflheader{
    padding: 0 30px;
    text-align: left;
    background: #00893d url(https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/sflheader.jpg) no-repeat center center;
  }

</style>

